<template>
  <div>
    <Row>
      <i-col span="24" class="operation_item y_query_right">
        <Button v-if="false" type="primary" icon="md-trending-down" class="y_condition" @click="batchSoldOut()"
                 :disabled="tParam.productSource.length==0">批量下架</Button>
        <DatePicker placeholder="开始时间" type="date" @on-change="chooseStartDate" format="yyyy-MM-dd"
                    style="min-width: 150px" class="y_condition"></DatePicker>
        -
        <DatePicker placeholder="截止时间" type="date" @on-change="chooseEndDate" format="yyyy-MM-dd"
                    class="y_condition"></DatePicker>
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
      </i-col>
    </Row>

    <br/>
    <!--表格和分页-->
<!--    <Table stripe border-->
<!--           @on-select="t_select"-->
<!--           @on-select-cancel="t_select_cancel"-->
<!--           @on-select-all="t_select_all"-->
<!--           @on-select-all-cancel="t_select_all_cancel"-->
<!--           :context="this"-->
<!--           :columns="tTable"-->
<!--           :data="tData.list"-->
<!--           class="table_css" no-data-text="暂无数据"></Table>-->
<!--    <br/>-->
    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="tData.list.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in tData.list">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="space-between" align="bottom">
            <i-col :xs="24" :sm="20" style="text-align: left;padding-left: 0.1rem;" >
              <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView title="货源" >
                <a :href="item.source" target="_blank" style="text-decoration:none;display: inline;">
                  {{item.source}}
                </a>
              </KeyValueView>
              </div>
<!--              <div style="width:100%;display:block;padding:0.3rem 0;"></div>-->
              <KeyValueView style="margin-left: 1.7rem;" title="SKU">{{item.sku}}</KeyValueView>
              <KeyValueView title="员工">{{item.userName}}</KeyValueView>
              <KeyValueView  title="时间" >{{ $tiyBJTime(item.createTime) }}</KeyValueView>




            </i-col>
            <i-col :xs="24" :sm="4" >
              <Button  ghost size="small" icon="md-return-left" type="success" @click="recover(index,2,'恢复上架')" style="margin-left: 0.5rem;margin-top: 0.5rem;">恢复</Button>
              <Button  ghost size="small" icon="md-trending-down" type="error"  @click="recover(index,4,'下架')" style="margin-left: 0.5rem;margin-top: 0.5rem;" >下架</Button>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>
    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60,100]"
            show-sizer show-elevator/>
    </div>
    <!--删除确认弹出框-->
    <Modal
      v-model="tStatus.modalDelete.isShow"
      :title="tStatus.modalDelete.title"
      :loading="tStatus.modalDelete.isLoading"
      @on-ok="deleteItem">
      <p>确认将该货源{{tStatus.modalDelete.title}}吗</p>
    </Modal>
  </div>

</template>

<script>
import tiyData from "./js/soldOut/sold_data";
import {webList,webDelete} from "./js/soldOut/sold_fun";
import KeyValueView from "../widgets/KeyValueView";


export default {
  data() {
    return {
      page: tiyData.tPage,
      tParam: tiyData.tParam,
      tTable:tiyData.tTable(this),
      tData: tiyData.tData,
      tStatus:tiyData.tStatus,
    }
  },
  components:{KeyValueView},
  methods:{
    chooseStartDate(date){
      if(date == null || date === "" || date == undefined){
        tiyData.tParam.startTime="";
      }else{
        tiyData.tParam.startTime = date+' 00:00:00';
      }
    },
    chooseEndDate(date){
      if(date == null || date === "" || date == undefined){
        tiyData.tParam.startTime="";
      }
      else{
        tiyData.tParam.endTime = date+' 23:59:59';
      }
    },
    search() {
      webList(this, tiyData);
    },
    changePage(page) {
      tiyData.tPage.currentPage = page;
      webList(this, tiyData);
    },
    sizeChange(page) {
      tiyData.tPage.stepNumber = page;
      webList(this, tiyData);
    },
    deleteItem(){
      webDelete(this, tiyData);
    },
    recover(index,sourceState,title){
      tiyData.tStatus.modalDelete.id=tiyData.tData.list[index].id;
      tiyData.tStatus.modalDelete.sourceState=sourceState;
      tiyData.tStatus.modalDelete.title=title;
      tiyData.tStatus.modalDelete.isShow = true;
    },
    t_select(selection,row){
      tiyData.tParam.productSource.push(row);
    },
    t_select_cancel(selection,row){
      tiyData.tParam.productSource.pop();
    },
    t_select_all(selection){
      tiyData.tParam.productSource.splice(0,tiyData.tParam.productSource.length);
      tiyData.tParam.productSource=[...selection];
    },
    t_select_all_cancel(selection){
      tiyData.tParam.productSource.splice(0,tiyData.tParam.productSource.length);
    },
    batchSoldOut(){
      this.$Message.info("功能暂不可用");
    },
  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base";

  .list_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .list_item:hover {
    background: @tiySectionColor;
  }
</style>
